<template>
    <div id="root">
       <tabbar id="tarBar">
      <tabbar-item selected link='/'>
        <!-- <img slot="icon" src="./image/my.svg"> -->
        <span slot="label" class="fonT-size">首页</span>
      </tabbar-item>
      <tabbar-item link='/search'>
        <!-- <img slot="icon" src="./assets/search.svg"> -->
        <span slot="label">发现</span>
      </tabbar-item>
        <div @click="jiaShow" >
            <span class="btn" slot="label">+</span>
        </div>
      <tabbar-item link='/message' >
        <!-- <img slot="icon" src="./assets/bill.svg"> -->
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item link='/me' >
        <!-- <img src="./assets/select.png" slot="icon-active"> -->
        <!-- <img slot="icon" src="./assets/my.svg"> -->
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
     <popup :show-mask='false' v-model="isShow" position='bottom' :popup-style="{zIndex:999}">
         <div class="add" >
             <homeMessage @cancelMessage="cancelTar"></homeMessage>
         </div>
     </popup>
    </div>
</template>

<script>
import {Tabbar,TabbarItem,Popup} from 'vux'
import homeMessage from '../skip/homeMessage'
export default {
    data:function(){
        return{
          
            isShow:false
        }
    },
    methods:{
        jiaShow:function() {
            this.isShow = true
        },
        cancelTar:function() {
            this.isShow = false
        }
    },
    components:{
        Tabbar,
        TabbarItem,
        Popup,
        homeMessage
    }
}
</script>

<style scoped>
.weui-tabbar{
  position: fixed !important;
  bottom: 0;
  z-index: 900;
  border-bottom: none;
}
.btn{
    font-size: 6vw;
    display: inline-block;
    width: 8vw;
    height: 8vw;
    background-color: #09bb07;
    border-radius: 50%;
    line-height: 8vw;
    color: white;
    text-align: center;
    /* margin-left:  3vw;
    margin-right: 3vw; */
    margin-top: 2vw;
}
.btn:active{
    color: #09bb07;
}
a:-webkit-any-link {
    text-decoration: none;
}
.add{
    width: 100vw;
    height: 50vw;
    background-color: white;
}
</style>
